<script lang="ts" setup>
import { ref } from 'vue'

const showCard = ref(true)
</script>

<template>
  <div class="p-6 max-w-2xl mx-auto">
    <h2 class="text-2xl font-bold mb-4 text-center bg-gradient-to-r from-blue-500 to-purple-600 bg-clip-text text-transparent">
      UnoCSS 示例组件
    </h2>

    <!-- 按钮示例 -->
    <div class="mb-6">
      <h3 class="text-lg font-semibold mb-2">按钮样式</h3>
      <div class="flex gap-2 flex-wrap">
        <button class="px-4 py-2 bg-blue-500 hover:bg-blue-600 text-white rounded-lg">主要按钮</button>
        <button class="px-4 py-2 bg-gray-200 hover:bg-gray-300 text-gray-800 rounded-lg">次要按钮</button>
        <button class="px-4 py-2 border-2 border-blue-500 text-blue-500 hover:bg-blue-50 rounded-lg">边框按钮</button>
        <button class="px-4 py-2 bg-red-500 hover:bg-red-600 text-white rounded-full">圆角按钮</button>
      </div>
    </div>

    <!-- 卡片示例 -->
    <div class="mb-6">
      <h3 class="text-lg font-semibold mb-2">卡片样式</h3>
      <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
        <div class="p-4 bg-white dark:bg-gray-800 rounded-lg shadow-md hover:shadow-lg transition-shadow">
          <h4 class="font-semibold text-blue-500 mb-2">卡片标题</h4>
          <p class="text-sm text-gray-600 dark:text-gray-300">这是一个使用 UnoCSS 创建的卡片组件。</p>
        </div>
        <div class="p-4 bg-gradient-to-br from-purple-500 to-pink-500 rounded-lg shadow-md text-white">
          <h4 class="font-semibold mb-2">渐变卡片</h4>
          <p class="text-sm">支持各种渐变效果。</p>
        </div>
      </div>
    </div>

    <!-- 图标示例 -->
    <div class="mb-6">
      <h3 class="text-lg font-semibold mb-2">图标示例</h3>
      <div class="flex gap-4 items-center text-2xl">
        <div class="i-carbon-logo-github hover:text-blue-500 cursor-pointer transition-colors" />
        <div class="i-carbon-home hover:text-green-500 cursor-pointer transition-colors" />
        <div class="i-carbon-user hover:text-purple-500 cursor-pointer transition-colors" />
        <div class="i-carbon-settings hover:text-orange-500 cursor-pointer transition-colors" />
        <div class="i-carbon-moon hover:text-indigo-500 cursor-pointer transition-colors" />
      </div>
    </div>

    <!-- 交互示例 -->
    <div class="mb-6">
      <h3 class="text-lg font-semibold mb-2">交互效果</h3>
      <button 
        @click="showCard = !showCard"
        class="px-4 py-2 bg-indigo-500 hover:bg-indigo-600 text-white rounded-lg transition-all duration-300 transform hover:scale-105 active:scale-95 shadow-md hover:shadow-lg"
      >
        {{ showCard ? '隐藏' : '显示' }}卡片
      </button>
      
      <div 
        v-if="showCard" 
        class="mt-4 p-4 bg-blue-50 dark:bg-blue-900/20 border-l-4 border-blue-500 rounded animate-fade-in"
      >
        <p class="text-sm">这是一个可以切换显示的卡片。</p>
      </div>
    </div>

    <!-- 响应式示例 -->
    <div class="mb-6">
      <h3 class="text-lg font-semibold mb-2">响应式布局</h3>
      <div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-2">
        <div v-for="i in 8" :key="i" class="h-20 bg-gradient-to-br from-cyan-400 to-blue-500 rounded-lg flex items-center justify-center text-white font-bold">
          {{ i }}
        </div>
      </div>
    </div>

    <!-- 表单示例 -->
    <div class="mb-6">
      <h3 class="text-lg font-semibold mb-2">表单元素</h3>
      <div class="space-y-3">
        <input 
          type="text" 
          placeholder="输入框示例"
          class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-all"
        />
        <textarea 
          placeholder="文本域示例"
          class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-all resize-none"
          rows="3"
        />
      </div>
    </div>

    <!-- 徽章和标签 -->
    <div>
      <h3 class="text-lg font-semibold mb-2">徽章和标签</h3>
      <div class="flex gap-2 flex-wrap">
        <span class="px-3 py-1 bg-blue-100 text-blue-800 text-sm rounded-full">新功能</span>
        <span class="px-3 py-1 bg-green-100 text-green-800 text-sm rounded-full">已完成</span>
        <span class="px-3 py-1 bg-yellow-100 text-yellow-800 text-sm rounded-full">进行中</span>
        <span class="px-3 py-1 bg-red-100 text-red-800 text-sm rounded-full">紧急</span>
        <span class="px-3 py-1 bg-purple-100 text-purple-800 text-sm rounded-full">重要</span>
      </div>
    </div>
  </div>
</template>


